<template>
  <div>
<Top><p>服务中心</p></Top>
    <div class="gun">
    <div class="one">
      <div>
        <van-icon name="manager" color="#FF6666" />
        <p>在线客服</p>
      </div>
      <div>
        <van-icon name="phone-o" color="#009933"/>
        <p>在线客服</p>
      </div>
    </div>
    <p>热门问题</p>
    <div class="ppp" v-for="(v,k,i) in event" :key="k"  @click="ppp(event[k.split('C')[0]+'Content'],event[k.split('C')[0]+'Caption'])">
    <p v-if="i%2!=0">{{(event[k.split("C")[0]+"Caption"])}}</p>  </div>
  </div>
    <router-view></router-view>
  </div>
</template>
<script>
import Top from "@/components/Top";
export default {
name: "Serve",
  components: {Top},
  data() {
    return {
      event: '',
    }
  },
  methods: {
    ppp(v,k) {
      this.$store.commit("clickserve",{title:k,content:v})
      this.$router.push("/serve/servexiang");
    }
  },
  computed: {

  },
  created() {
  this.axios.get("https://elm.cangdu.org/v3/profile/explain").then(data=>{
    console.log(data.data)
    this.event=data.data;
  })

  }
}
</script>

<style scoped>
.one{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.one div{
  width: 50%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6rem;
  border-bottom: 1px solid #f5f5f5;
  background-color: white;
}
.ppp{
  padding: 0 .7rem;
  line-height: 3rem;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}
.gun{
  overflow-y: scroll;
  height:580px;
  //background-color: #df5000;
}
</style>